<template>
  <div class="baseList">
    <div class="tableBoxs">
      <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
      <t-table
        row-key="index"
        :data="tableData"
        :columns="COLUMNS"
        :stripe="stripe"
        :bordered="bordered"
        :hover="hover"
        :table-layout="tableLayout ? 'auto' : 'fixed'"
        :size="size"
        :show-header="showHeader"
        cell-empty-content="-"
        resizable
        lazy-load
      >
        <!-- 图片预览及展示 -->
        <template #image="{ row }">
          <div class="tdesign-demo-image-viewer__base">
            <t-image-viewer :images="[row.image]">
              <template #trigger="{ open }">
                <div class="tdesign-demo-image-viewer__ui-image">
                  <img
                    alt="test"
                    :src="row.image"
                    class="tdesign-demo-image-viewer__ui-image--img"
                  />
                  <div
                    class="tdesign-demo-image-viewer__ui-image--hover"
                    @click="open"
                  >
                    <span><BrowseIcon size="1.4em" /> 预览</span>
                  </div>
                </div>
              </template>
            </t-image-viewer>
          </div>
        </template>
        <!-- 价格拼接 -->
        <template #price="{ row }">
          {{ isDecimals(row.price) ? row.price : row.price + '.00' }}
        </template>
        <!-- 操作栏 -->
        <template #op="{ row }">
          <div class="operateCon">
            <a class="btn-dl">删除</a>
            <a class="font-bt">编辑</a>
            <a class="delete">禁用</a>
          </div>
        </template>
      </t-table>
      <!-- 分页 -->
      <t-pagination
        v-if="total > 10"
        v-model="pagination.pageNum"
        v-model:pageSize="pagination.pageSize"
        :total="total"
        @change="onPageChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { COLUMNS } from '../constants'
import { onMounted, ref } from 'vue'
import { TableProps } from 'tdesign-vue-next'

const stripe = ref(true)
const bordered = ref(true)
const hover = ref(false)
const tableLayout = ref(false)
const size = ref<TableProps['size']>('medium')
const showHeader = ref(true)

let prop = defineProps({
  tableData: {
    type: Object,
    default: () => {
      return []
    }
  },
  total: {
    type: Number,
    default: 0
  },
  pagination: {
    type: Object,
    default: () => {
      return {
        pageSize: 10,
        pageNum: 1
      }
    }
  }
})
//在js代码中添加isDecimals方法，判断当前字段是否包含了小数点
const isDecimals = (val) => {
  if (String(val).indexOf('.') > -1) {
    return true
  }
  return false
}


let emit = defineEmits(['givePagination']);
// 翻页设置当前页
const onPageChange = (pageInfo) => {
  emit('givePagination', pageInfo)
}
</script>
